<template>
  <!-- 安装依赖：
npm install --save @tweenjs/tween.js
或者直接使用cdn:
<script src="https://cdn.bootcss.com/tween.js/r14/Tween.min.js"></script>-->
  <div id="app">
    <button @click="change">start</button>
    <button @click="reset">reset</button>
    <div>
      <span>init-num: {{ num }}</span>
    </div>
    <div>
      <span>tween-num: {{ numTween }}</span>
    </div>
  </div>
</template>
<script>
import TWEEN from "@tweenjs/tween.js";
export default {
  data() {
    return {
      num: 0,
      numTween: 0,
    };
  },
  watch: {
    num(newValue, oldValue) {
      new TWEEN.Tween({
        number: oldValue,
      })
        .to(
          {
            number: newValue,
          },
          5000
        )
        .onUpdate((tween) => {
          this.numTween = tween.number.toFixed(0);
        })
        .start();
      function animate() {
        if (TWEEN.update()) {
          requestAnimationFrame(animate);
        }
      }
      animate();
    },
  },
  methods: {
    change() {
      this.num = 5000;
    },
    reset() {
      this.num = 0;
    },
  },
};
</script>

<style scoped>
span {
  font-size: 28px;
}
</style>
